import 'package:flutter/material.dart';
import 'package:flutter_08/pages/yun_xsj.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:chart_sparkline/chart_sparkline.dart';

class Yunxfx extends StatefulWidget {
  const Yunxfx({Key? key}) : super(key: key);

  @override
  _YunxfxState createState() => _YunxfxState();
}

class _YunxfxState extends State<Yunxfx> {
  var rw_bool = true;
  var zb_bool = true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: _drawer(),
      appBar: AppBar(
        title: Text("运行分析"),
      ),
      body: ListView(
        scrollDirection: Axis.vertical,
        children: [_first()],
      ),
    );
  }

  Widget _first() {
    return Column(children: [
      Container(
        margin: EdgeInsets.only(left: 24.h, top: 49.h, bottom: 42.h),
        child: Text("指标分析", style: TextStyle(fontSize: 32.sp, color: Color(0xff21212B))),
      ),
      Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          GestureDetector(
            onTap: () {
              setState(() {
                rw_bool = true;
              });
            },
            child: Container(
                margin: EdgeInsets.only(left: 73.w, right: 40.w),
                child: Text(
                  "一网",
                  style: TextStyle(fontSize: 32.sp, color: rw_bool ? Color(0xff006FFF) : Color(0xff8E8E8E)),
                )),
          ),
          GestureDetector(
            onTap: () {
              setState(() {
                rw_bool = false;
              });
            },
            child: Container(
                child: Text(
              "二网",
              style: TextStyle(fontSize: 32.sp, color: rw_bool ? Color(0xff8E8E8E) : Color(0xff006FFF)),
            )),
          ),
        ],
      ),
      SizedBox(
        height: 10.h,
      ),
      Divider(
        height: 10,
        thickness: 1,
        color: Color(0xffE2E2E2),
        indent: 0,
        endIndent: 0,
      ),
      Row(
        children: [
          AnimatedSwitcher(
            duration: const Duration(milliseconds: 600),

            ///动画构建器 构建指定动画类型
            transitionBuilder: (Widget child, Animation<double> animation) {
              //执行缩放动画
              return ScaleTransition(child: child, scale: animation);
            },
            child: rw_bool == true ? _first_bottom() : _first_bottom(),
          ),
        ],
      ),
      Container(
        margin: EdgeInsets.only(top: 20.h),
        width: double.infinity,
        height: 600.h,
        // color: Colors.blue,
        child: Column(children: [
          Container(
            margin: EdgeInsets.only(left: 24.h, top: 49.h, bottom: 42.h),
            child: Text("指标分析", style: TextStyle(fontSize: 32.sp, color: Color(0xff21212B))),
          ),
          Row(
            children: [
              Padding(
                padding: EdgeInsets.only(left: 20.w),
                child: SizedBox(
                  width: 118.w,
                  height: 50.w,
                  child: RaisedButton(
                    color: zb_bool == true ? Color.fromRGBO(0, 111, 255, 0.1) : Color(0xffF2F2F2),
                    child: Text(
                      '12h',
                      style: TextStyle(color: zb_bool == true ? Color(0xff1989FA) : Color(0xffADB2B7)),
                    ),
                    onPressed: () {
                      setState(() {
                        zb_bool = true;
                      });
                    },
                    shape: RoundedRectangleBorder(
                        // side: BorderSide(color: Colors.red),
                        borderRadius: BorderRadius.circular(29.w)),
                    elevation: 1.0,
                  ),
                ),
              ),
              Padding(
                padding: EdgeInsets.only(left: 20.w),
                child: SizedBox(
                  width: 118.w,
                  height: 50.w,
                  child: RaisedButton(
                    color: zb_bool == false ? Color.fromRGBO(0, 111, 255, 0.1) : Color(0xffF2F2F2),
                    child: Text(
                      '24h',
                      style: TextStyle(color: zb_bool == false ? Color(0xff1989FA) : Color(0xffADB2B7)),
                    ),
                    onPressed: () {
                      setState(() {
                        zb_bool = false;
                        Navigator.push(context, MaterialPageRoute(builder: (context) {
                          return Yunxsj();
                        }));
                      });
                    },
                    shape: RoundedRectangleBorder(
                        // side: BorderSide(color: Colors.red),
                        borderRadius: BorderRadius.circular(29.w)),
                    elevation: 1.0,
                  ),
                ),
              )
            ],
          ),
          Row(
            children: [
              AnimatedSwitcher(
                duration: const Duration(milliseconds: 600),

                ///动画构建器 构建指定动画类型
                transitionBuilder: (Widget child, Animation<double> animation) {
                  //执行缩放动画
                  return ScaleTransition(child: child, scale: animation);
                },
                child: zb_bool == true ? _zbcharts() : _zbcharts(),
              ),
            ],
          ),
        ]),
      )
    ]);
  }

  Widget _zbcharts() {
    var data = [0.0, 1.0, 1.5, 2.0, 0.0, 0.0, -0.5, -1.0, -0.5, 0.0, 0.0];
    return Container(
      width: 750.w,
      height: 200.0,
      child: Sparkline(
        data: data,
        backgroundColor: Colors.red,
        lineColor: Colors.lightGreen[500]!,
        fillMode: FillMode.below,
        fillColor: Colors.lightGreen[200]!,
        pointsMode: PointsMode.all,
        pointSize: 5.0,
        pointColor: Colors.amber,
        useCubicSmoothing: true,
        lineWidth: 1.0,
        gridLinelabelPrefix: '\$',
        gridLineLabelPrecision: 3,
        enableGridLines: true,
        averageLine: true,
        averageLable: true,
        kLine: ['max', 'min', 'first', 'last'],
        enableThreshold: true,
        thresholdSize: 0.1,
        lineGradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [Colors.purple[800]!, Colors.purple[200]!],
        ),
        fillGradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [Colors.red[800]!, Colors.red[200]!],
        ),
      ),
    );
  }

  Widget _first_bottom() {
    return Container(
      key: UniqueKey(),
      child: Row(
        children: [
          Expanded(
            child: Column(
              children: [
                Padding(
                  padding: EdgeInsets.only(top: 20.h),
                  child: Text(
                    "单位面积瞬时负荷",
                    style: TextStyle(color: Color(0xff52606D), fontSize: 24.sp),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.only(top: 20.h, bottom: 20.h),
                  child: Text(
                    "18.5.w/m",
                    style: TextStyle(color: Color(0xff52606D), fontSize: 42.sp, fontWeight: FontWeight.w700),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.only(top: 15.h),
                  child: Text(
                    "与相似系统差值",
                    style: TextStyle(color: Color(0xff52606D)),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.only(top: 15.h),
                  child: Text(
                    "12.3",
                    style: TextStyle(color: Color(0xff5DA4FF)),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.only(top: 15.h),
                  child: Text(
                    "与相似系统差值",
                    style: TextStyle(color: Color(0xff52606D)),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.only(top: 15.h),
                  child: Text(
                    "12.3",
                    style: TextStyle(color: Color(0xff5DA4FF)),
                  ),
                )
              ],
            ),
          ),
          VerticalDivider(
            thickness: 1,
            color: Color(0xffE2E2E2),
            indent: 0,
            endIndent: 0,
          ),
          Expanded(
            child: Column(
              children: [
                Padding(
                  padding: EdgeInsets.only(top: 20.h),
                  child: Text(
                    "单位面积瞬时负荷",
                    style: TextStyle(color: Color(0xff52606D), fontSize: 24.sp),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.only(top: 20.h, bottom: 20.h),
                  child: Text(
                    "18.5.w/m",
                    style: TextStyle(color: Color(0xff52606D), fontSize: 42.sp, fontWeight: FontWeight.w700),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.only(top: 15.h),
                  child: Text(
                    "与相似系统差值",
                    style: TextStyle(color: Color(0xff52606D)),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.only(top: 15.h),
                  child: Text(
                    "12.3",
                    style: TextStyle(color: Color(0xff5DA4FF)),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.only(top: 15.h),
                  child: Text(
                    "与相似系统差值",
                    style: TextStyle(color: Color(0xff52606D)),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.only(top: 15.h),
                  child: Text(
                    "12.3",
                    style: TextStyle(color: Color(0xff5DA4FF)),
                  ),
                )
              ],
            ),
          ),
          VerticalDivider(
            thickness: 1,
            color: Color(0xffE2E2E2),
            indent: 0,
            endIndent: 0,
          ),
          Expanded(
            child: Column(
              children: [
                Padding(
                  padding: EdgeInsets.only(top: 20.h),
                  child: Text(
                    "单位面积瞬时负荷",
                    style: TextStyle(color: Color(0xff52606D), fontSize: 24.sp),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.only(top: 20.h, bottom: 20.h),
                  child: Text(
                    "18.5.w/m",
                    style: TextStyle(color: Color(0xff52606D), fontSize: 42.sp, fontWeight: FontWeight.w700),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.only(top: 15.h),
                  child: Text(
                    "与相似系统差值",
                    style: TextStyle(color: Color(0xff52606D)),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.only(top: 15.h),
                  child: Text(
                    "12.3",
                    style: TextStyle(color: Color(0xff5DA4FF)),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.only(top: 15.h),
                  child: Text(
                    "与相似系统差值",
                    style: TextStyle(color: Color(0xff52606D)),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.only(top: 15.h),
                  child: Text(
                    "12.3",
                    style: TextStyle(color: Color(0xff5DA4FF)),
                  ),
                )
              ],
            ),
          ),
        ],
      ),
      width: 750.w,
      height: 350.h,
    );
  }

  Widget _drawer() {
    return Drawer(
      child: ListView(
        ///edit start
        padding: EdgeInsets.zero,

        ///edit end
        children: <Widget>[
          Container(
            padding: EdgeInsets.only(top: 70.w, left: 20.w),
            decoration: BoxDecoration(color: Color(0xFFffffff)),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  child: Container(
                    // 圆形图片
                    child: ClipOval(
                      child: Image.asset(
                        'assets/imgs/person-3.png',
                        height: 104.w,
                        width: 104.w,
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.all(10.0),
                  child: Row(
                    children: [
                      Expanded(
                          child: Text(
                        "Znce1326354872Znce1326354872Znce1326354872Znce1326354872Znce1326354872",
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                      )),
                      RawChip(
                          label: Text(
                            '管理员',
                            style: TextStyle(color: Color(0XFF006FFF)),
                          ),
                          backgroundColor: Color(0xFF7BABE9))
                    ],
                  ),
                ),
                Padding(
                    padding: EdgeInsets.all(10.w),
                    child: Row(
                      children: [Image.asset("assets/imgs/ts.png"), Text("哈尔滨")],
                    )),
              ],
            ),
          ),
          Container(
            height: 20.w,
            color: Color(0xFFF5F6F7),
          ),
          Container(
            height: 600.0,
            decoration: BoxDecoration(
              color: Colors.white,
            ),
            child: Column(
              children: [
                ListTile(
                  leading: Icon(Icons.view_agenda),
                  title: Text('运行分析'),
                  onTap: () {
                    print(1);
                  },
                ),
                ListTile(
                  leading: Icon(Icons.view_agenda_rounded),
                  title: Text('运行数据'),
                  onTap: () {},
                ),
                ListTile(
                  leading: Icon(Icons.view_agenda_sharp),
                  title: Text('工艺画面'),
                  onTap: () {},
                ),
                ListTile(
                  leading: Icon(Icons.view_agenda_sharp),
                  title: Text('异常告警'),
                  onTap: () {},
                ),
                ListTile(
                  leading: Icon(Icons.view_agenda_sharp),
                  title: Text('关于我们'),
                  onTap: () {},
                )
              ],
            ),
          ),
        ],
      ),
    );
  }
}
